import React from 'react'
import {
  Text, View, SafeAreaView,
} from 'react-native'
import Navigation, { RouterKey } from '@NAVIGATION/Navigation'
import EStyleSheet from 'react-native-extended-stylesheet'
import LinearGradientButton from '@COMPONENTS/button/LinearGradient'
import Button from '@COMPONENTS/button/Button'
import { useAppSelector } from '@REDUX/store'
import Api from '@API'
import Dialog from '@COMPONENTS/Dialog'
import Toast from '@COMPONENTS/Toast'
import CustomerService from '@COMPONENTS/modal/CustomerService'
import AnalyticsUtil from '@UTILS/AnalyticsUtil'
import Storage, { StorageKey } from '@UTILS/Storage'

const ForbidUser: React.FC = () => {
  const { user: { p8Id } } = useAppSelector((state) => state.user)
  const onPress = () => {
    CustomerService.show()
  }

  const onForbid = () => {
    Dialog.show({
      content: '确认注销当前账户吗？',
      title: '提示',
      onConfirm: () => {
        Api.forbidUser({ UserId: p8Id }).then(() => {
          Toast.success('注销成功')
          AnalyticsUtil.profileSignOff()
          Storage.set(StorageKey.token, '')
          Navigation.reset(RouterKey.Login)
        }).catch((e) => {
          Toast.error(e.message || e)
        })
      },
    })
  }
  const thinkAgain = () => Navigation.goBack()

  return (
    <SafeAreaView style={styles.page}>
      <View style={styles.content}>
        <Text style={styles.title}>注销纳瑞维账号</Text>
        <Text style={styles.desc}>很遗憾，账号注销后，纳瑞维将无法再为您提供服务。注销前，先确认以下信息，以保障您的账号安全和权益</Text>

        <View style={styles.item}>
          <View style={styles.circle} />
          <Text style={styles.text}>{'注销后，您将无法再用此账号登录APP连接\n仪器使用；'}</Text>
        </View>

        <View style={styles.item}>
          <View style={styles.circle} />
          <Text style={styles.text}>{'注销后，您的账号信息将被清空，且无法恢\n复'}</Text>
        </View>

        <View style={styles.tip}>
          <Text style={styles.tipText}>提示：若有其他问题可</Text>
          <Text style={[styles.tipText, styles.active]} onPress={onPress}>联系客服</Text>
          <Text style={styles.tipText}>处理</Text>
        </View>
      </View>

      <Button onPress={onForbid}>
        <Text style={styles.forbid}>注销账号</Text>
      </Button>

      <LinearGradientButton
        style={styles.button}
        onPress={thinkAgain}
      >
        <Text style={styles.buttonText}>我再想想</Text>
      </LinearGradientButton>

    </SafeAreaView>
  )
}

export default ForbidUser

const styles = EStyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: '$white',
  },
  content: {
    flex: 1,
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 24,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '#333333',
    paddingTop: 52,
    marginBottom: 8,
  },
  desc: {
    fontSize: 13,
    fontFamily: 'PingFangSC-Light',
    fontWeight: '300',
    color: '#8C8C8C',
    marginBottom: 48,
  },
  item: {
    flexDirection: 'row',
    marginBottom: 28,
  },
  circle: {
    width: 6,
    height: 6,
    backgroundColor: '#595959',
    borderRadius: 3,
    marginRight: 8,
    marginTop: 8,
  },
  text: {
    fontSize: 15,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#595959',
  },
  tip: {
    marginTop: 12,
    borderTopWidth: 0.5,
    borderTopColor: '$border',
    paddingTop: 19,
    flexDirection: 'row',
  },
  tipText: {
    fontSize: 13,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#8C8C8C',
  },
  active: {
    color: '$theme',
    textDecorationLine: 'underline',
    textDecorationColor: '$theme',
  },
  forbid: {
    fontSize: 14,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#8C8C8C',
    marginBottom: 12,
    textAlign: 'center',
  },
  button: {
    width: 235,
    height: 46,
    borderRadius: 25,
    alignSelf: 'center',
    marginBottom: 48,
    justifyContent: 'center',
  },
  buttonText: {
    fontSize: 16,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '$white',
    textAlign: 'center',
  },
})
